<template>
	<div>
		<el-dialog
			title="用户管理"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			append-to-body
			:before-close="compileCancel"
			:close-on-press-escape="false"
		>
			<el-form ref="form" :model="formData" label-width="80px" :rules="rules">
				<el-form-item label="医生ID" prop="doctorId">
					<el-select v-model="formData.doctorId" placeholder="请选择" clearable>
						<el-option
							v-for="item in doctorList"
							:key="item.id"
							:label="item.doctorName"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="用户名称" prop="userRealName">
					<el-input
						v-model="formData.userRealName"
						:readonly="doctorNameFlag"
					></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="userAccount">
					<el-input v-model="formData.userAccount"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="userPassword">
					<el-input v-model="formData.userPassword" show-password></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="formData.userGender">
						<el-radio label="0">男</el-radio>
						<el-radio label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机号" prop="userTelephone">
					<el-input v-model="formData.userTelephone"></el-input>
				</el-form-item>
				<el-form-item label="所属机构">
					<el-cascader
						ref="cascader"
						v-model="cascaderPitch"
						filterable
						clearable
						:disabled="isAdmin == 1 ? false : true"
						:options="options"
						:props="{ value: 'id', label: 'orgName', checkStrictly: true }"
						@change="institution"
					></el-cascader>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch
						v-model="formData.whetherEnable"
						active-value="0"
						inactive-value="1"
					></el-switch>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" size="small" @click="compileSave('form')"
						>保存</el-button
					>
					<el-button size="small" @click="compileCancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { userModificationApi, userAccountCheck } from '@//http/api.js'
import { getUserOrgList } from '@/http/org'

import { getUserDoctorList, getGetModel } from '@/http/doctor'
export default {
	props: {
		dialogTableVisible: {
			type: Boolean,
			default: false,
		},
		parentMenu: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	data() {
		var spCodeValidator = this.spCodeFun
		return {
			//判断是否为系统管理员登录
			isAdmin: '',
			dimensionArr: [],
			cascaderPitch: [],
			options: [],
			doctorNameFlag: false,
			doctorList: [],
			orgId: [],
			form: {
				id: '',
			},
			rules: {
				userRealName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				userAccount: [
					{ required: true, message: '账号不能为空', trigger: 'blur' },
					{ validator: spCodeValidator, trigger: 'blur' },
				],
				userPassword: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
					{ min: 6, message: '不得少于6位', trigger: 'blur' },
				],
				userTelephone: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' },
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
						message: '目前只支持中国大陆的手机号码',
					},
				],
			},
			cascaderConent: [],
			userTreeData: [],
			defaultProps: {
				children: 'children',
				label: 'orgName',
			},
			userId: '',
		}
	},

	computed: {
		formData() {
			return this.parentMenu
		},
	},
	watch: {
		dialogTableVisible(isVisible) {
			if (isVisible) {
				this.getGetModel()
				this.getUserDoctorList()
				getUserOrgList({}).then(({ data }) => {
					this.options = data.data
				})
			}
		},
		'formData.doctorId': function (val) {
			if (val && val != '') {
				this.doctorNameFlag = true
				let doctor = this.doctorList
					.filter(i => i.id != val)
					.find(info => info.id == val)
				this.formData.userRealName = doctor.doctorName
			} else {
				this.doctorNameFlag = false
				this.formData.userRealName = ''
			}
		},
	},
	created() {},
	methods: {
		getUserDoctorList() {
			getUserDoctorList({ doctorId: this.formData.doctorId }).then(
				({ data }) => {
					if (data?.head?.code == 200) {
						this.doctorList = data.data
					}
				},
			)
		},
		institution(e) {
			this.orgId = e.toString()
			console.log(e, '选择的值')
		},

		getGetModel() {
			getGetModel({ id: this.formData.id }).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.cascaderPitch = []
					this.dimensionArr = []
					console.log(data.data, '数据')
					this.isAdmin = data.data.isAdmin
					this.dimensionArr.push(String(data.data.orgId).split(','))
					this.cascaderPitch = this.dimensionArr.flat()
					console.log(this.cascaderPitch)
				}
			})
		},
		spCodeFun(rule, value, callback) {
			userAccountCheck({ userAccount: value, id: this.formData.id })
				.then(({ data }) => {
					if (data.head.code == 200) {
						callback()
					}
				})
				.catch(({ data }) => {
					if (data.head.code == 400) {
						callback(new Error('账号不能重复'))
						return
					} else {
						callback()
					}
				})
		},
		compileSave(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log('2', this.formData)
					console.log(this.formData.whetherEnable)
					this.formData.orgId =
						this.orgId.toString() == ''
							? this.cascaderPitch.toString()
							: this.orgId.toString()
					let formData = this.formData
					console.log(formData, '测试数据1111111', this.cascaderPitch)
					userModificationApi(formData).then(data => {
						console.log('data', data)
						this.$message({
							message: '保存成功',
							type: 'success',
						})
						// this.cascaderPitch = []
						this.$refs.cascader.$refs.panel.clearCheckedNodes()
						let dialogValue = {
							verdict: false,
							typeValue: 1,
						}
						this.$emit('customclick', dialogValue)
					})
				} else {
					this.$message.error('保存失败')
					return false
				}
			})
		},
		//取消
		compileCancel() {
			this.cascaderPitch = []
			console.log(this.formData.whetherEnable)
			let dialogValue = {
				verdict: false,
				typeValue: 2,
			}
			this.$emit('customclick', dialogValue)
			this.$nextTick(() => {
				this.$refs['form'].clearValidate()

				this.$refs.cascader.$refs.panel.clearCheckedNodes()
			})
		},
	},
}
</script>

<style>
.el-cascader--medium {
	width: 100%;
}
</style>
